<template>
	<view>
		<uni-card>
					<view class="info">
						<image class="user-icon" src="../../static/img/logo.png" mode="widthFix" />
						<view class="input-group">
							<text class="item">用户名：</text>
							<input class="input" type="text" v-model="uname" placeholder="秦小雅" />
							<text class="mod">修改</text>
						</view>
						<view class="input-group">
							<text class="item">性别：</text>
							<input type="text" class="input" v-model="sex" placeholder="女" />
							<text class="mod">修改</text>
						</view>
						<view class="input-group">
							<text class="item">邮箱：</text>
							<input type="text" class="input" v-model="uphone" placeholder="ya@qq.com" />
							<text class="mod">修改</text>
						</view>
						<view class="input-group input-groups">
							<text class="item">手机号：</text>
							<input type="text" class="input" v-model="email" placeholder="13501234560" />
							<text class="mod">修改</text>
						</view>
						<text class="logout" @click="logout">退出登录</text>
					</view>
				</uni-card>
	</view>
</template>

<script>
	export default {
		name:"xz-profile",
		data() {
			return {
				uname: '',
				sex: '',
				uphone: '',
				email: ''
			};
		},
		onLoad() {
					let url = $url.userProfile
					uni.showLoading({
						title: '用户信息加载中...'
					})
		
					uni.request({
						url,
						success: (res) => {
							console.log(res);
							this.data = res.data
						},
						fail: (err) => {
							console.log(err);
						},
						complete() {
							//完成时关闭加载提示
							uni.hideLoading()
						}
					})
		
				},
		mounted() {
			uni.setNavigationBarTitle({
				title:'用户档案'
			})
			
		},
		methods: {
			logout() {
				// console.log(1)
				uni.navigateBack()
			}
		
		},
		
	}
</script>

<style lang="scss">
.info {
		text-align: center;

		.user-icon {
			width: 500rpx;
			// height: 500rpx;
			border-radius: 20rpx;
			margin-top: 80rpx;
			box-shadow: 3rpx 3rpx 5px #000000;
			margin-bottom: 80rpx;
		}

		.input-group {
			padding: 15rpx 10rpx;
			display: flex;
			width: 570rpx;
			align-items: center;
			border-top: 2rpx solid $uni-bg-color-grey;
			font-size: 35rpx;

			.item {
				display: block;
				width: 160rpx;
				text-align: left;
				padding-left: 20rpx;
			}

			.input {
				text-align: left;
				width: 300rpx;
			}

			.mod {
				border: 1rpx solid black;
				padding: 10rpx;
				border-radius: 10rpx;
			}
		}

		.input-groups {
			border-bottom: 2rpx solid $uni-bg-color-grey;
		}

		.logout {
			font-size: 35rpx;
			color: white;
			border: 1rpx solid white;
			padding: 20rpx 40rpx;
			border-radius: 10rpx;
			display: block;
			width: 250rpx;
			margin:30rpx auto ;
			background-color: red;
		}
	}
</style>